<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="./css/head.css" rel="stylesheet">
    <link href="./css/register.css" rel="stylesheet">
    <link href="./css/base.css" rel="stylesheet">
</head>

<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/Utils.js"></script>
    <script src="js/mock.js"></script>
    <div class="head">
        <div class="userInfoBox">
            <a href="login.html" class="login">登录</a>
            <a href="register.html" class="register">注册</a>
        </div>
    </div>

    <div class="nav_head">
        <span>
            <a href="./index.html">首页</a>
        </span>
        <span>
            <a href="./pet_kinds.html">宠物</a>
        </span>

        <span>
            <a href="./pet_thing.html">宠物用品</a>
        </span>

        <span>
            <a href="./mine.html">个人中心</a>
        </span>
    </div>

    <div class="main">
        <img src="image/login/login.jpg">

        <div class="loginForm">
            <h3 class="title">注册</h3>
            <div class="form">
                <span>用户名</span>
                <input type="text" name="username" id="username">
            </div>
            <div class="form">
                <span>手机号码</span>
                <input type="text" name="phoneNumber" id="phoneNumber">
            </div>
            <div class="form">
                <span>密码</span>
                <input type="password" name="password" id="password">
            </div>
            <div class="form">
                <span>确认密码</span>
                <input type="password" name="confirmPassword" id="confirmPassword">
            </div>
            <div class="form">
                <span>支付密码</span>
                <input type="password" name="payPassword" id="payPassword">
            </div>
            <div class="form">
                <span>确认支付密码</span>
                <input type="password" name="confirmPayPassword" id="confirmPayPassword">
            </div>

            <div class="button" id="register">
                注册
            </div>
        </div>
    </div>

    <script>
        function checkStyle() {
            let username = $('#username').val()
            let phoneNumber = $('#phoneNumber').val()
            let password = $('#password').val()
            let confirmPassword = $('#confirmPassword').val()
            let payPassword = $('#payPassword').val()
            let confirmPayPassword = $('#confirmPayPassword').val()

            let phoneNumberRule = /1[356789][0-9]{9}$/
            let obj = {
                username, phoneNumber, password, confirmPassword, payPassword, confirmPayPassword
            }

            for (let key in obj) {
                if (obj[key] == "") {
                    alert("请填写完整")
                    return false
                }
            }

            if (!phoneNumberRule.test(phoneNumber)) {
                alert("请填写正确的手机号")
                return false
            }

            else if (password != confirmPassword) {
                alert("密码不一致")
                return false
            }

            else if (payPassword != confirmPayPassword) {
                alert("支付密码不一致")
                return false
            }


            return true
        }

        function registerEvent() {
            $('#register').click(function () {
                if (!checkStyle())
                    return

                let username = $('#username').val()
                let phoneNumber = $('#phoneNumber').val()
                let password = $('#password').val()
                let confirmPassword = $('#confrimPassword').val()
                let payPassword = $('#payPassword').val()
                let confirmPayPassword = $('#confrimPayPassword').val()

                let data = {
                    username, phoneNumber, password, confirmPassword, payPassword, confirmPayPassword
                }

                data = JSON.stringify(data)

                let checkUsername = $.ajax({
                    data: { username },
                    url: baseUrl + 'check_username.php',
                    type: 'get',
                    success: function (res) {

                    }
                })

                let register = function () {
                    return $.ajax({
                        data,
                        url: baseUrl + 'register.php',
                        type: 'post',
                        success: function (res) {
                        }
                    })
                }

                checkUsername.then(res => {
                    if (typeof (res) == 'string')
                        res = JSON.parse(res)

                    if (res.code == 200)
                        return register()

                    else alert(res.msg)

                }).then(res => {
                    if(!res)    return

                    if(typeof(res) == 'string')
                        res = JSON.parse(res)
                    
                    if(res.code == 200){
                        alert(res.msg)
                        location.href="login.html"
                    }else alert(res.msg)
                })


            })
        }

        $('document').ready(function () {

            registerEvent()
        })
    </script>
</body>

</html>